<template>
<div class="usercount">
   <div class="usercount_span"><span>用户统计</span></div>
  <div class="usercount_data"> </div>
  <div class="usercount_price">
    <span class="iconfont icon-tubiao-duanhengxian" style="padding-right:10px"> 用户总量<span>{{total}}</span>(个)</span>
    <span class="iconfont icon-tubiao-duanhengxian1"> 新增用户<span>{{newUser}}</span>(个)</span>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
/* import moment from 'moment' */
import Bus from '@/utils/EventBus'
export default {
  name: 'usercountIndex',
  data () {
    return {
      sevendatas: [],
      dateList: [],
      newUserList: [],
      totalUserList: [],
      newUser: 0,
      total: 0
    }
  },
  created () {
    Bus.$on('usercount', (usercountdata) => {
      // console.log(turnoverdata.dateList, 'this.dateList')

      this.dateList = usercountdata.dateList.split(',')

      this.newUserList = usercountdata.newUserList.split(',').map(Number)
      this.totalUserList = usercountdata.totalUserList.split(',').map(Number)

      this.newUser = this.newUserList.reduce((sum, item) => sum + item)
      this.total = Math.max.apply(null, this.totalUserList)

      this.usercount()
    })
  },
  methods: {
    usercount () {
      const chartDom = document.querySelector('.usercount_data')

      const myChart = echarts.init(chartDom)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })

      const option = {
        tooltip: {
          trigger: 'axis',
          borderColor: 'rgba(255,255,255,0.5)', // 设置边框颜色为半透明白色
          borderStyle: 'dashed', // 设置边框为虚线
          borderWidth: 1 // 设置边框宽度

        },
        xAxis: {
          type: 'category',
          data: this.dateList,
          axisLabel: {
            // fontSize: 10, // 这里设置 X 轴刻度的字体大小
            // interval: 0 // 显示全部刻度
          },
          axisTick: {
            show: false // 这里设置为false即可取消x轴刻度线
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.totalUserList,
            type: 'line',
            lineStyle: {
              color: 'rgb(241,224,152)' // 这里改成你想要的颜色
            }
          },
          // 第二条线
          {
            data: this.newUserList,
            type: 'line',
            lineStyle: {
              color: 'pink' // 这里改成你想要的颜色
            },
            smooth: true // 可选，是否平滑曲线
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }

}
</script>

<style lang="less" scoped>
.usercount{

  background-color: white;

 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);

}
.usercount_data{
  width: 580px;
  height: 500px;
}
.usercount_span{
  padding-top: 20px;
  span{
    padding-left: 20px;
    font-size: 20px;
    font-weight:600;
       }
}
.usercount_price{
text-align: center;
   margin-top:-35px;
   padding-bottom:30px;
}

</style>
